JavaScript 获取元素的8种方法

2023-04-12 22:46| 来源: 网络整理| 查看: 265

DOM

文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

JS获取DOM元素的八种方法通过ID获取（getElementById）通过name属性（getElementsByName）通过标签名（getElementsByTagName）通过类名（getElementsByClassName）获取html的方法（document.documentElement）获取body的方法（document.body）通过选择器获取一个元素（querySelector）通过选择器获取一组元素（querySelectorAll）1、通过元素的ID去拿元素 --> 获取的是一个指定的元素（getElementById）

若页面上有一个或多个对应的ID ，则只获取第一个ID对应的元素若页面上没有对应的ID ，则拿到的是个 nullconsole.log(div1);// 只有在标准浏览器下支持console.log(document.getElementById(‘div1’));//全浏览器都支持

console.log(document.getElementById('div1'));

document 在这里是上下文的意思，就是我在哪个范围里边去找元素

注意：

在ie6、7中,会把表单元素（input）的name属性值当做ID来使用在ie6、7中，不区分ID的大小写项目实战注意:不要让表单元素的name和其他元素的id重复，不要用id的大小写来区分我们的不同元2、通过元素的类名（class名）获取元素 --> 获取的是一组元素集合（getElementsByClassName）

通过元素的类名（class的值）是项目中最常用的一种方法，但是在ie6-ie8中会报错。获取多个的这几个方法，即使你获取的只有一个，他也是类数组，也是一个集合，如果想用其中的第一个，你也要通过索引拿出来用若页面上没有对应的类名，那么我们得到的就是一个空集合；若页面上有一个或多个对应的类名，那么我们得到的就是一个或多个元素组成的集合。

console.log(document.getElementsByClassName('div2')); console.log(document.getElementsByClassName('div2')[0]); console.log(document.getElementsByClassName('div2')[1]); console.log(document.getElementsByClassName('div3')[0]);3、通过元素的标签名获取（tagName）;获取元素跟类名获取的一样；都是一组元素集合（getElementsByTagName）

在整个文档中，通过元素的标签名获取一组元素。获取的是一个对象数据类型结果，并且是一个类数组（以数字作为索引，索引从0开始，逐级递增，索引代表的是当前对应的某一个元素，有一个叫做length的属性代表获取的个数）

console.log(document.getElementsByTagName('div')); console.log(document.getElementsByTagName('div')[3]);

1.获取的结果是一个类数组。2.上下文不必须是document了，因为getElementsByTagName方法在不仅在Document类的原型上也在Element类的原型上，所以document和元素都可以使用这个方法。

４、通过name属性（getElementsByName）

1.上下文必须是document。2.必须传参数，参数是是获取元素的name属性。3.返回值是一个类数组，没有找到返回空数组。4.在IE浏览器中只能获取到表单元素，当然我们一般也只用它获取表单元素，从ie10开始可以不只是表单元素。

document.getElementsByName('name')5.获取html的方法（document.documentElement）

document.documentElement是专门获取html这个标签的。

6.获取body的方法（document.body）

document.body是专门获取body这个标签的。

7.通过选择器获取一个元素（querySelector）用法：

1.上下文可以是document，也可以是一个元素。2.参数是选择器，如：“div .className”。3.返回值只获取到一个元素。这个方法不兼容IE7以及以前版本。

8.通过选择器获取一组元素（querySelectorAll）

1.上下文可以是document，也可以是一个元素。2.参数是选择器，如：“div .className”。3.返回值是一个类数组。同querySelector，不兼容IE7。

缩小上下文的范围document.getElementsByClassName('div4')[0].getElementsByClassName('span1')[0] document.getElementsByClassName('div4')[0].getElementsByTagName('span')[0]

点在这里表示从属关系身体.胳膊翻译成汉语就是 “的”

我建了一个前端小白交流群，点击下面的知乎官方小卡片复制我的微信号，添加进入交流群。我会给大家分享我收集整理的各种学习资料，组织大家一起做项目练习，帮助大家匹配一位学习伙伴互相监督学习，欢迎加入。

知乎营销平台

【本文地址】

公司简介

联系我们